<template>
  <div class="left-container">
    <div class="pie">
      <p class="pie-title">当前分拣效率</p>
      <div ref="pieChart" class="chart"></div>
      <label class="label-left">0</label>
      <p class="label-right">6000</p>
      <p class="label-bottom">历史最高效率：4703 件/小时</p>
    </div>
    <div class="pie pie-large">
      <p class="pie-title">操作统计</p>
      <p class="label">今日操作量</p>
      <p class="label-bold">349382件</p>
      <p class="label">开机时间：02月06日 09:23</p>
      <p class="label-bold">近7小时操作量</p>
      <div ref="myChart" class="chart-large"></div>
    </div>
    <div class="pie pie-small">
      <p class="pie-title">格口状态统计</p>
      <table class="box-status">
        <tr>
          <th>状态</th>
          <th>数量</th>
          <th>占比</th>
        </tr>
        <tr>
          <td class="status-td"><span class="status-circle"></span> 正常</td>
          <td>113</td>
          <td>
            <el-progress :percentage="80" :show-text="false" color="#41d5a1"></el-progress>
          </td>
        </tr>
        <tr>
          <td class="status-td"><span class="status-circle2"></span> 已满件</td>
          <td>6</td>
          <td>
            <el-progress :percentage="12" :show-text="false" color="red"></el-progress>
          </td>
        </tr>
        <tr>
          <td class="status-td"><span class="status-circle2"></span> 禁用</td>
          <td>11</td>
          <td>
            <el-progress :percentage="20" :show-text="false" color="#3055ac"></el-progress>
          </td>
        </tr>
        <tr>
          <td class="status-td"><span class="status-circle2"></span> 锁定</td>
          <td>14</td>
          <td>
            <el-progress :percentage="20" :show-text="false" color="#bf9f6b"></el-progress>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Index',
  mounted() {
    this.createChart();
    this.initChart();
  },
  methods: {
    createChart() {
      const chartDom = this.$refs.pieChart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'item',
        },
        title: {
          text: '3829',
          subtext: '件/小时',
          left: 'center',
          top: 55,
          textStyle: {
            fontSize: 20,
            color: '#3cbe8e',
            align: 'center',
          },
          subtextStyle: {
            fontFamily: '微软雅黑',
            fontSize: 15,
            color: 'white',
          },
        },
        color: ['#3cbe8e', '#31343b'],
        series: [
          {
            type: 'pie',
            radius: ['80%', '95%'],
            center: ['50%', '50%'],
            startAngle: 180,
            endAngle: 360,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 3829, name: '1221' },
              { value: 2200, name: '' },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },

    initChart() {
      const myChart = echarts.init(this.$refs.myChart);
      const option = {
        tooltip: {
          show: true,
          backgroundColor: '#17263b',
          formatter: '<p style="color:white;"><p style="color:white;font-size="20px">{c} 票</p>{b}',
        },
        xAxis: {
          type: 'category',
          show: false,
          data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
        },
        yAxis: {
          type: 'value',
          show: false,
        },
        color: '#39dea4',
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '10px',
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.left-container {
  width: 321px;
  position: absolute;
  z-index: 99;
  bottom: 0;
}

.pie {
  width: 300px;
  height: 280px;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: #292b2f;
  border-radius: 14px;
  padding: 26px 10px;
  margin-bottom: 10px;
  position: relative;
}
p {
  color: aliceblue;
}

.pie-title {
  font-size: 22px;
  font-weight: bold;
  margin: 13px;
  margin-bottom: 25px;
  color: aliceblue;
}

.pie-large {
  height: 400px;
}

.pie-small {
  height: 216px;
}

.chart {
  width: 300px;
  height: 220px;
}

.chart-large {
  width: 300px;
  height: 250px;
}

.label {
  color: rgb(141, 138, 138);
  font-size: 16px;
  margin-left: 13px;
}

.label-left {
  color: rgb(141, 138, 138);
  font-size: 16px;
  margin-left: 13px;
  position: absolute;
  bottom: 97px;
  left: 47px;
}

.label-right {
  color: rgb(141, 138, 138);
  font-size: 16px;
  position: absolute;
  z-index: 99;
  bottom: 97px;
  left: 209px;
  width: 94px;
  text-align: center;
}

.label-bottom {
  text-align: center;
  color: rgb(141, 138, 138);
  font-size: 16px;
  position: absolute;
  bottom: 49px;
  width: calc(100% - 20px);
}

.label-bold {
  font-size: 20px;
  font-weight: bold;
  margin: 13px;
}

.box-status {
  width: 266px;
  margin: 13px;
  text-align: center;
}

.box-status tr {
  height: 27px;
}

.box-status th {
  font-size: 14px;
  color: #9b9999;
}

.status-td {
  text-align: left;
  color: aliceblue;
}
td {
  color: aliceblue;
}

.status-circle {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #41d5a1;
  display: inline-block;
}

.status-circle2 {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #41d5a1;
}

.el-progress-bar__outer {
  background-color: #48494b !important;
}
</style>
